<template>
  <div class="min-h-screen flex  flex items-center justify-center bg-gradient-to-r from-blue-500 ">
    <el-card class="login-card text-center ">
      <h2 class=" text-3xl font-semibold mb-6 text-white ">欢迎登录</h2>
      <LoginForm></LoginForm>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import LoginForm from './LoginForm/index.vue'
</script>

<style scoped
       lang="scss">
/* Tailwind CSS classes combined with custom styles */
.login-card {
  width: 520px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
}

h2 {
  color: $accent-100;
}

/* You can add more custom styles here */
</style>
